Web Design
Website Rebuild & Patch Notes
After months of planning and development, I'm excited to share the fully rebuilt version of my website. This update marks a major shift in both design and architecture — moving away from the legacy ASP.NET Core 2.1 MVC framework to a modern .NET 8 Blazor Web App, combining both Blazor Server and WebAssembly. In this post, I’ll highlight the ...
| Web Design | 87 reads
ASP.NET WebForms Panel 控件完整介紹：用屬性快速控制外觀的容器元件
在 ASP.NET WebForms 的開發中，<asp:Panel> 控件是一個常見卻經常被忽略的工具。很多初學者只知道使用 <div> 來進行區塊劃分，卻不知道 Panel 控件本質上就是 div 的伺服器端包裝，能讓開發者透過屬性快速設定邊框、背景顏色、可見性等外觀與行為。本文將全面介紹 ASP.NET Panel 控件 的功能、用途與最佳實踐 ...
| Web Design | 1 reads
ASP.NET WebForms 使用 MultiView + Button 模擬 TabControl 效果
在 ASP.NET WebForms 中，並沒有像 WinForms 那樣現成的 TabControl 控制項。 不過，我們可以透過 MultiView 搭配一排 Button，很輕鬆地模擬出頁籤切換的效果 ...
| Web Design | 2 reads
ASP.NET WebForms 中 Label 控件實現文字水平與垂直居中（使用 IDE 屬性編輯）
在 ASP.NET WebForms 項目中，Label 控件最終會輸出成一個 <span> 元素。這種元素屬於 行內元素 (inline)，如果直接在屬性裡調整，文字往往無法達到想要的水平、垂直居中效果 ...
| Web Design | 3 reads
【前端技巧】用 CSS 一行實現元素水平居中：margin: 0 auto
在前端開發中，「讓一個元素在水平方向上居中」是一個常見需求。雖然現在有很多新方法（如 Flexbox、Grid），但最經典、兼容性最好的方式就是這一招 ...
| Web Design | 2 reads
Chrome 快取清除全攻略：Ctrl + F5、Ctrl + Shift + R 和 Ctrl + Shift + Delete 有何不同？
了解 Chrome 中 Ctrl + F5、Ctrl + Shift + R 和 Ctrl + Shift + Delete 的差異，搞懂它們如何影響網頁快取與資源重新載入。適用於開發者、前端工程師與想要強制刷新網站的你 ...
| Web Design | 52 reads
Blazor Web App 重製：炫酷的賽博朋克風格網站
本次網站開發基於 Blazor Web App，使用的框架為 .NET 8.0，並採用 Blazor Server 與 Blazor Client 的混合模式。 由於是初次開發，這次的實現主要以 Blazor Server 為主，以確保網站的穩定性與開發效率。 整體風格採用 賽博朋克 + Hacknet，目標是最大化展示內容、強調炫酷視覺效果，同時確保網站 手機端友好 ...
| Web Design | 19 reads
為何在舊 IE 中讀得到值，而在 Chrome/Firefox/Edge 中失敗？
以下是一個簡化的範例：在 IE（尤其是比較舊版本、且在 Quirks Mode 下）可以正常讀取，但在 Chrome、Firefox、Edge 等現代瀏覽器中，會出現 undefined 或直接報錯。此例用的是舊式 document.myForm.myInput[0].value 這種語法，IE 會把它當作「集合存取」而湊合可用；但現代標準瀏覽 ...
| Web Design | 52 reads
声纹查看器
这是一个简易的声纹查看器。 你可以直接本地上传一个wav文件来实时查看声音波纹。 它的目的，最主要还是——如果你懒得打开pr或ae等等软件的话，打开这个网页直接使用是一个不错的选择。 （因为本来开AE就比较费时间，如果你只是想看看波纹哪里凹陷和突出，而不是想编辑的话 ...
| Web Design | 1k reads
Wav Player
The "Wav Player" is a user-friendly audio player that allows you to play and visualize WAV files. With its intuitive interface, you can easily upload your WAV files, play them, and view the waveform in real-time. The waveform is displayed as a visual representation of the sound, allowing you to easily navigate through the audio and jump to specific parts of the file by clicking on the progress bar. ...
| Web Design | 1k reads
JS代码实例：读取多张图片文件并显示（附说明）
这种写法可以更简洁地定义函数，并且在定义时会绑定 this 到当前的执行上下文中。在这个例子中，箭头函数的 this 将指向 fileInput 元素，而不是全局对象。 而上一个方法： 这种写法使用了一个普通函数来定义事件处理程序，它的 this 将在运行时动态绑定。在这个例子中，this 将指向 fileInput ...
| Web Design | 1k reads
JS代码实例：读取图片文件并显示（附说明）
const 是 JavaScript 中的一个关键字，用于声明一个常量。声明的常量在声明后不能再被赋值，这与 let 或 var 声明的变量不同。 作用域：let 声明的变量具有块级作用域，而 var 声明的变量只具有函数作用域。 这意味着，在使用 let 声明变量时，该变量只在声明它的代码块中可见，在代码块外部不可见。而使用 var 声明变量时，该变量在函数内部可见，函数外部也可见。 通常来说，建议优先使用 let 声明变量，因为它可以避免一些常见的 ...
| Web Design | 1k reads
[目录] JavaScript基础：方法触发相关
JS复习：监测按钮点击事件触发方法（通过选择id） JS复习：最简单的通过点击触发方法 JS复习：通过表单提交触发方法 JS复习：监测按钮点击事件触发方法（通过选择类） JS复习：监测按钮点击事件触发方法（通过选择标签） JS复习：监测按钮点击事件触发方法（通过属性选择器） JS复习：监测按钮点击事件触发方法（通过后代选择器） JS复习：伪类选择器 JS：使用JQuery通过选择标签ID触发方法 JS：使用JQuery通过选择类触发方法 ...
| Web Design | 1k reads
JS复习：监测按钮点击事件触发方法（通过后代选择器）
JS复习：监测按钮点击事件触发方法（通过后代选择器） 这个你也不一定常用。但是还是需要记忆 ...
| Web Design | 1k reads
JS复习：监测按钮点击事件触发方法（通过属性选择器）
JS复习：监测相同类的按钮点击事件触发方法 通过属性选择器这种，也许你并不熟悉，但并不代表不常用。 这个还是需要重点记忆一下的 ...
| Web Design | 1k reads